<template>
	<div class="adminBox">
		<el-card>
			<div class="headerTitle" style="padding:20px;">管理员输入</div>
			<div class="enterList">
				<div class="itemStyle" style="padding-top:0;">
					<div class="itemTitle">项目群设置</div>
					<div class="radioGroup">
						<el-radio-group v-model="groupRadio">
							<el-radio :label="3">显示所有项目名称</el-radio>
							<el-radio :label="6">仅显示指定项目名称</el-radio>
						</el-radio-group>
						<div class="specificPro">
							<div>
								<div>
									<span>添加特定项目</span>
									<el-dropdown trigger="click" @command="addHandleCommand">
									<span class="el-dropdown-link">
									  某某某项目<el-icon class="el-icon--right"><arrow-down/></el-icon>
									</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item command="Action1">Action 1</el-dropdown-item>
												<el-dropdown-item command="Action2">Action 2</el-dropdown-item>
												<el-dropdown-item command="Action3">Action 3</el-dropdown-item>
												<el-dropdown-item command="Action4">Action 4</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</div>
								<div>
									<span>移除特定项目</span>
									<el-dropdown trigger="click" @command="delHandleCommand">
									<span class="el-dropdown-link">
									  某某某项目<el-icon class="el-icon--right"><arrow-down/></el-icon>
									</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item command="Action1">Action 1</el-dropdown-item>
												<el-dropdown-item command="Action2">Action 2</el-dropdown-item>
												<el-dropdown-item command="Action3">Action 3</el-dropdown-item>
												<el-dropdown-item command="Action4">Action 4</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</div>
							</div>
							<div class="proList">
								<div v-for="item of proData" :key='item'>
									{{ item }}
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="itemStyle">
					<div class="itemTitle">
						项目基本信息
						<button class="subBtn">提交</button>
					</div>
					<div style="margin-top:15px;">
						<el-form :inline="true" class="demo-form-inline basicForm" label-position="left"
								 label-width="90px"
								 size="small">
							<el-form-item class="yz" label='业主公司简称'>
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item class="english" label='英文简称'>
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item class="sendLogo" label="公司logo">
								<el-upload action="undefined" class="upload-demo">
									<div class="iconfont icon-yunshangchuan_o">上传</div>
								</el-upload>
							</el-form-item>
							<el-form-item class="sketch" label="中央空调及其楼宇自控简述">
								<el-input placeholder="请输入" type="textarea"></el-input>
							</el-form-item>
							<div class="footInpForm">
								<el-form-item class="oaoSystem" label="OAO系统开始运作日期">
									<el-input placeholder="请输入"></el-input>
								</el-form-item>
								<el-form-item class="oaoCost" label="OAO系统投入成本">
									<el-input placeholder="请输入"></el-input>
								</el-form-item>
							</div>
						</el-form>
					</div>
				</div>

				<div class="energy">
					<div class="itemTitle">
						项目基本信息
						<button class="subBtn">提交</button>
					</div>

					<div class="monitor">
						<div class="energyTitle">
							OAO监管能耗
						</div>
						<div class="right">
							<div class="last">
								<div class="OAOTitle1">去年</div>
								<div class="inputNum">
									<div>
										电<input placeholder="请输入"/>kWh
									</div>
									<div class="gas">
										天然气<input placeholder="请输入"/>m³
									</div>
									<div>
										市政热水<input placeholder="请输入"/>kWh
									</div>
								</div>
							</div>
							<div class="beforeLast">
								<div class="OAOTitle1">前年</div>
								<div class="inputNum">
									<div>
										电<input placeholder="请输入"/>kWh
									</div>
									<div class="gas">
										天然气<input placeholder="请输入"/>m³
									</div>
									<div>
										市政热水<input placeholder="请输入"/>kWh
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="budget publicOAO">
						<div class="energyTitle">
							能耗预算（月）
						</div>
						<ProjectForm :tableData="tableData"></ProjectForm>
					</div>

					<div class="lastYear publicOAO">
						<div class="energyTitle">
							2021年能耗（月）
						</div>
						<ProjectForm :tableData="tableData"></ProjectForm>
					</div>

					<div class="beforeLastYear publicOAO">
						<div class="energyTitle">
							2022年能耗（月）
						</div>
						<ProjectForm :tableData="tableData"></ProjectForm>
					</div>
				</div>

				<div class="report">
					<div class="itemTitle">
						分析报告输入
						<button class="subBtn">提交</button>
					</div>
					<div class="reportInput">
						<div>
							<div>现场勘查问题</div>
							<div>
								<el-input placeholder="请输入" type="textarea"></el-input>
							</div>
						</div>
						<div>
							<div>主要措施</div>
							<div>
								<el-input placeholder="请输入" type="textarea"></el-input>
							</div>
						</div>
						<div>
							<div>租户/客户舒适度投诉</div>
							<div>
								<el-input placeholder="请输入" type="textarea"></el-input>
							</div>
						</div>
						<div>
							<div>舒适度投诉分析</div>
							<div>
								<el-input placeholder="请输入" type="textarea"></el-input>
							</div>
						</div>
						<div>
							<div>提升舒适度策略</div>
							<div>
								<el-input placeholder="请输入" type="textarea"></el-input>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>

		<el-card>
			<div style="padding:20px;"></div>
			<div class="cardRight">
				<div class="relevant">
					<div class="itemTitle">能源相关</div>
					<div class="energyItem">
						<div>单位能耗标准</div>
						<div>合理值<input placeholder="请输入"/>kWh/m²y</div>
						<div>先进值<input placeholder="请输入"/>kWh/m²y</div>
						<div>类似建筑<input placeholder="请输入"/>kWh/m²y</div>
						<div>绿电价格<span>RMB</span><input placeholder="请输入"/>/kWh</div>
						<div>绿证价格<span>RMB</span><input placeholder="请输入"/>/kWh</div>
						<div>CCER价格<span>RMB</span><input placeholder="请输入"/>/tCO₂</div>
					</div>
				</div>

				<div class="company">
					<div class="itemTitle">
						<div>
							单位转换
							<span>*吨标煤 tce</span>
						</div>
						<button class="subBtn">提交</button>
					</div>

					<div class="companyItem">
						<div>
							<div>电<span>1kWh=<input placeholder="请输入"/></span>kgCO₂</div>
							<div>电<span>1kWh=<input placeholder="请输入"/></span>tce</div>
						</div>
						<div>
							<div>天然气<span>1m3=<input placeholder="请输入"/></span>kgCO₂</div>
							<div>天然气<span>1m3=<input placeholder="请输入"/></span>tce</div>
						</div>
						<div>
							<div>市政热水<span>1kWh=<input placeholder="请输入"/></span>kgCO₂</div>
							<div>市政热水<span>1kWh=<input placeholder="请输入"/></span>tce</div>
						</div>
					</div>
				</div>

				<div class="comfort">
					<div class="itemTitle">
						舒适度相关
						<button class="subBtn">提交</button>
					</div>
					<div class="temperature">
						<div>
							<div class="temperTitle">夏季舒适温度范围</div>
							<div>
								<input placeholder="最低温度" type="text">
								<span>—</span>
								<input placeholder="最高温度" type="text">
							</div>
						</div>
						<div>
							<div class="temperTitle">冬季舒适温度范围</div>
							<div>
								<input placeholder="最低温度" type="text">
								<span>—</span>
								<input placeholder="最高温度" type="text">
							</div>
						</div>
					</div>
				</div>

				<div class="economics">
					<div class="itemTitle">
						经济性相关
						<button class="subBtn">提交</button>
					</div>

					<div class="rate">
						<div>本地资本化率</div>
						<div>
							<el-input placeholder="请输入" size='small'></el-input>
						</div>
					</div>
				</div>

				<div class="ESG">
					<div class="itemTitle">
						ESG相关
						<button class="subBtn">提交</button>
					</div>

					<div>
						<div class="ESGinput">
							<div class="ESGTitle">可选条目输入</div>
							<div>
								<el-input placeholder="请输入" size="small"></el-input>
								<el-input placeholder="请输入" size="small"></el-input>
								<el-input placeholder="请输入" size="small"></el-input>
							</div>
						</div>

						<div class="ESGinput">
							<div class="ESGTitle">对应条件：节能率</div>
							<div>
								<el-input placeholder="请输入" size="small"></el-input>
								<el-input placeholder="请输入" size="small"></el-input>
								<el-input placeholder="请输入" size="small"></el-input>
							</div>
						</div>

						<div class="ESGinput">
							<div class="ESGTitle">对应得分</div>
							<div>
								<el-input placeholder="请输入" size="small"></el-input>
								<el-input placeholder="请输入" size="small"></el-input>
								<el-input placeholder="请输入" size="small"></el-input>
							</div>
						</div>
					</div>
				</div>

				<div class="keyEquip">
					<div class="itemTitle">
						关键设备
						<button class="subBtn">提交</button>
					</div>
					<div class="keyTable">
						<el-table :cell-style="{ textAlign: 'center' }" :data="keyDataList"
								  :header-cell-style="{ textAlign: 'center' }"
								  border
								  size="small">
							<el-table-column label="序号" type="index"></el-table-column>
							<el-table-column label="设备名称" prop="name"></el-table-column>
							<el-table-column label="校验（校准）日期" prop="date"></el-table-column>
							<el-table-column label="检查人" prop="inspector"></el-table-column>
							<el-table-column label="检查人手机" prop="inspectorPhone"></el-table-column>
							<el-table-column label="设备说明书" prop="equipBook"></el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import {reactive, ref} from "vue";
import ProjectForm from './projectForm.vue'

let groupRadio = ref('')

let tableData = reactive([
	{
		name: '电kWh',
		one: '',
		two: '',
		three: '',
		four: '',
		five: '',
		six: '',
		seven: '',
		eight: '',
		nine: '',
		ten: '',
		eleven: '',
		twelve: '',
	},
	{
		name: '天然气m³',
		one: '',
		two: '',
		three: '',
		four: '',
		five: '',
		six: '',
		seven: '',
		eight: '',
		nine: '',
		ten: '',
		eleven: '',
		twelve: '',
	},
	{
		name: '市政热水kWh',
		one: '',
		two: '',
		three: '',
		four: '',
		five: '',
		six: '',
		seven: '',
		eight: '',
		nine: '',
		ten: '',
		eleven: '',
		twelve: '',
	},
])

let keyDataList = reactive([
	{
		name: '',
		date: '',
		inspector: '',
		inspectorPhone: '',
		equipBook: '',
	},
	{
		name: '',
		date: '',
		inspector: '',
		inspectorPhone: '',
		equipBook: '',
	},
])

let proData = reactive([])

const addHandleCommand = function (item) {
	if (Array.from(proData).includes(item)) {
		return proData
	} else {
		proData.push(item)
	}
}

const delHandleCommand = function (item) {
	let index = proData.indexOf(item)
	index !== -1 && proData.splice(index, 1)
}
</script>

<style lang="less" scoped>
:deep(.el-card__body) {
	padding: 0;
}

.itemTitle {
	color: #646363;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.subBtn {
		width: 95px;
		padding: 4px 0;
		border-radius: 4px;
		color: #fff;
		background: #8faadc;
		border: 1px solid #8faadc;
	}

	span {
		font-size: 12px;
		margin-left: 20px;
	}
}

.adminBox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	column-gap: 20px;
}

.enterList {
	padding: 20px 20px;

	.itemStyle {
		border-bottom: 1px dashed #a8a7a7;
		padding: 20px 0 10px;
	}

	.radioGroup {
		margin-top: 10px;
	}

	.el-radio-group {
		flex-direction: column;
		align-items: flex-start;

		.el-radio {
			flex-direction: row-reverse;
			width: 200px;
			margin: 0 !important;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.el-radio__input {
				margin-left: 10px;
			}

			.el-radio__label {
				padding: 0 !important;
			}
		}
	}

	.specificPro {
		display: flex;
		margin-top: 10px;
		justify-content: flex-end;

		& > div:first-child {
			height: 96px;
			margin-right: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			div {
				span {
					margin-right: 10px;
					font-size: 15px;
					color: #646363;
				}

				.el-dropdown {
					border: 1px solid #Eee;
					padding: 3px 8px;
					border-radius: 4px;

					.el-dropdown-link {
						font-size: 13px;
					}

					i {
						margin: 0 5px;
					}
				}
			}
		}

		.proList {
			display: flex;
			flex-wrap: wrap;
			width: 300px;
			height: 80px;
			border: 1px solid #e7e7e7;
			border-radius: 4px;
			padding: 5px;

			div {
				padding: 0 5px;
				font-size: 13px;
			}
		}
	}
}

.basicForm {
	:deep(.el-form-item__label) {
		font-size: 13px !important;
	}

	:deep(.el-form-item__content) {
		width: 190px;
	}

	.sendLogo {
		width: 100%;
		margin-right: 0 !important;

		.el-upload {
			div {
				font-size: 15px;
				color: #4d62a5;
				display: flex;
			}

			.icon-yunshangchuan_o:before {
				font-size: 22px;
			}
		}
	}

	.yz {
		margin-right: 78px !important;
	}

	.english {
		margin-right: 0;
	}

	.sketch {
		width: 100%;
		margin-right: 0 !important;

		:deep(.el-form-item__label) {
			width: 175px !important;
		}

		:deep(.el-textarea__inner) {
			resize: none;
		}
	}

	.footInpForm {
		display: flex;
		justify-content: space-between;
	}

	.oaoSystem {
		margin-right: 0 !important;

		:deep(.el-form-item__label) {
			width: 172px !important;
		}

		:deep(.el-form-item__content) {
			width: 145px;
		}
	}

	.oaoCost {
		margin-right: 0 !important;

		:deep(.el-form-item__label) {
			width: 130px !important;
		}

		:deep(.el-form-item__content) {
			width: 145px;
		}
	}

}

.energy {
	border-bottom: 1px dashed #a8a7a7;
	padding: 20px 0;

	.energyTitle {
		width: 25%;
		font-size: 14px;
	}

	.monitor {
		margin-top: 15px;
		font-size: 14px;
		display: flex;
		justify-content: space-between;

		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 75%;

			input {
				width: 50px;
				border: 1px solid #d8d8d8;
				padding: 1px 3px;
				border-radius: 4px;
				margin: 0 5px;
			}

			& > div {
				display: flex;
				margin-bottom: 15px;
				width: 100%;
				justify-content: space-between;
			}

			.OAOTitle1 {
				margin-right: 15px;
			}
		}
	}

	.inputNum {
		display: flex;

		div {
			margin-left: 20px;
		}
	}
}

.publicOAO {
	display: flex;
	margin-top: 20px;

	:deep(.el-table__header) {
		width: 100% !important;

		thead {
			tr > th {
				background: #cddaee !important;
				color: #171717;
			}
		}
	}

	:deep(.el-table__body) {
		width: 100% !important;

		tbody {
			tr {
				background: #f6f8fb;
			}

			.cell {
				padding: 0 !important;
				text-align: center;
			}
		}
	}
}

.report {
	margin-top: 20px;

	.reportInput {
		& > div {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			font-size: 14px;

			& > div:first-child {
				width: 25%;
			}

			& > div:last-child {
				width: 75%;
			}

			.el-textarea {
				height: 100px;

				:deep(.el-textarea__inner) {
					height: 100%;
					resize: none;
				}
			}
		}
	}
}

.cardRight {
	padding: 20px 20px 0;

	.relevant {
		border-bottom: 1px dashed #a8a7a7;
		padding: 20px 0;

		.energyItem {
			font-size: 12px;
			display: flex;
			flex-wrap: wrap;
			&>div:nth-child(2){
				margin-left:15px;
			}
			div {
				padding: 20px 20px 0 0;
			}

			span {
				margin-left: 10px;
			}

			input {
				width: 50px;
				border: 1px solid #d8d8d8;
				padding: 1px 3px;
				border-radius: 4px;
				margin: 0 5px;
			}
		}
	}
}

.company {
	border-bottom: 1px dashed #a8a7a7;
	padding: 20px 0;

	.companyItem {
		display: flex;
		align-items: center;
		justify-content: space-between;

		& > div {
			margin-top: 0 !important;
		}

		div {
			margin-top: 15px;
		}

		span {
			padding: 0 10px 0 20px;
		}

		input {
			width: 50px;
			border: 1px solid #d8d8d8;
			padding: 1px 3px;
			border-radius: 4px;
			margin: 0 5px;
		}
	}
}

.comfort {
	border-bottom: 1px dashed #a8a7a7;
	padding: 20px 0;

	.temperature {
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
		font-size: 13px;

		& > div {
			display: flex;

			.temperTitle {
				margin-right: 15px;
			}

			span {
				font-weight: 600;
				color: #e6e7e7;
			}
		}

		input {
			width: 70px;
			border: 1px solid #d8d8d8;
			padding: 1px 3px;
			border-radius: 4px;
			margin: 0 5px;

			&::placeholder {
				color: #d8d8d8;
			}
		}
	}
}

.economics {
	border-bottom: 1px dashed #a8a7a7;
	padding: 20px 0;

	.rate {
		display: flex;
		align-items: center;
		font-size: 13px;
		margin-top: 15px;

		& > div:last-child {
			margin-left: 40px;
		}
	}
}

.ESG {
	border-bottom: 1px dashed #a8a7a7;
	padding: 20px 0;

	.ESGinput {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;

		& > div:last-child {
			display: flex;
			justify-content: space-between;

			.el-input {
				width: 150px;
				margin-right: 20px;
			}
		}
	}

	.ESGTitle {
		margin-right: 10px;
	}
}

.keyEquip {
	padding: 20px 0;

	.keyTable {
		margin-top: 20px;
	}
}

</style>
